<template>
  <div>
     <!-- 标题栏 -->
     <van-nav-bar title="青年旅社">
      <template #right>
        <van-popover v-model:show="showPopover"
        placement="bottom-end" :actions="actions">
          <template #reference>
            <van-icon name="apps-o" size="25" />
          </template>
        </van-popover> 
      </template>
    </van-nav-bar>
    <van-nav-bar
      title="青岛旅游攻略"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="strategy">
      <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" >
      <h3>青岛旅游攻略</h3>
      <ul>
        <li>城市介绍：</li>
        <li>城市特色：</li>
        <li>美食推荐：</li>
        城市推荐：<van-rate v-model="value" icon="like" void-icon="like-o" />
      </ul>
      
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref,} from 'vue'
// 控制右上角的弹窗
const showPopover = ref(false)
const value = ref(3);
const onClickLeft = () => history.back();
const actions = [
  {text:'首页'},
  {text:'订单'},
  {text:'我的'},
  ]
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 2.6667vw;
    line-height: 20vw;
    text-align: center;
    // background-color: #39a9ed;
    margin: .4vw 0;
  }
  .strategy{
    img{
      width: 100%;
      height: 53.3333vw;
    }
  }
  </style>
  